messageTray: restyle the message tray

The patch implements the new visual style for the message tray,
that is now larger and has textured background. The icons are
also larger.

https://bugzilla.gnome.org/show_bug.cgi?id=677213

diff --git a/data/Makefile.am b/data/Makefile.am
index 84bc393b3d59c38f2ef11a219c7f4c3fd1d32a7a..a3f58144782e570086918ed22254a31834c65cd7 100644 (file)
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -36,6 +36,7 @@ dist_theme_DATA =                             \
        theme/filter-selected-rtl.svg           \
        theme/gnome-shell.css                   \
        theme/logged-in-indicator.svg           \
+       theme/message-tray-background.png       \
        theme/noise-texture.png                 \
        theme/panel-button-border.svg           \
        theme/panel-button-highlight-narrow.svg \

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index bd1c5d3c17bfccfe7015194ffaeb9e9d09b869d4..1c636a56327c756a8516a89ee28e4d537e5f88d3 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1172,10 +1172,9 @@ StButton.popup-menu-item:insensitive {
 
 /* Message Tray */
 #message-tray {
-    background-gradient-direction: vertical;
-    background-gradient-start: rgba(0,0,0,0.01);
-    background-gradient-end: rgba(0,0,0,0.82);
-    height: 36px;
+    background: #2e3436 url(message-tray-background.png);
+    background-repeat: repeat;
+    height: 72px;
 }
 
 .notification {
@@ -1387,7 +1386,7 @@ StButton.popup-menu-item:insensitive {
 
 #summary-mode {
     padding: 2px 0px 0px 4px;
-    height: 36px;
+    height: 72px;
 }
 
 #summary-mode:rtl {

diff --git a/data/theme/message-tray-background.png b/data/theme/message-tray-background.png
new file mode 100644 (file)
index 0000000..357dae0
Binary files /dev/null and b/data/theme/message-tray-background.png differ

diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index f1ffe7b62389f71c43a59a10da74d5b4e9c8ffca..d1f6b75174787556f5e2c0473a08eb261d4c1cea 100644 (file)
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -31,6 +31,7 @@ const LONGER_SUMMARY_TIMEOUT = 4;
 const HIDE_TIMEOUT = 0.2;
 const LONGER_HIDE_TIMEOUT = 0.6;
 
+const NOTIFICATION_ICON_SIZE = 24;
 
 // We delay hiding of the tray if the mouse is within MOUSE_LEFT_ACTOR_THRESHOLD
 // range from the point where it left the tray.
@@ -542,7 +543,7 @@ const Notification = new Lang.Class({
             this._table.remove_style_class_name('multi-line-notification');
 
         if (!this._icon) {
-            this._icon = params.icon || this.source.createIcon(this.source.ICON_SIZE);
+            this._icon = params.icon || this.source.createIcon(NOTIFICATION_ICON_SIZE);
             this._table.add(this._icon, { row: 0,
                                           col: 0,
                                           x_expand: false,
@@ -1132,7 +1133,7 @@ const SourceActor = new Lang.Class({
 const Source = new Lang.Class({
     Name: 'MessageTraySource',
 
-    ICON_SIZE: 24,
+    SOURCE_ICON_SIZE: 48,
 
     _init: function(title, iconName, iconType) {
         this.title = title;
@@ -1191,8 +1192,7 @@ const Source = new Lang.Class({
         if (this._mainIcon)
             return;
 
-        this._mainIcon = new SourceActor(this, this.ICON_SIZE);
-        return;
+        this._mainIcon = new SourceActor(this, this.SOURCE_ICON_SIZE);
     },
 
     // Unlike createIcon, this always returns the same actor;
@@ -2213,7 +2213,7 @@ const MessageTray = new Lang.Class({
         // notifications that might have been in the process of hiding get full opacity.
         //
         // We tween any notification showing in the banner mode to banner height
-        // (this._notificationBin.y = -this.actor.height).
+        // (this._notificationBin.y = -this._notificationBin.height).
         // This ensures that both new notifications and notifications in the banner mode that might
         // have been in the process of hiding are shown with the banner height.
         //
@@ -2230,7 +2230,7 @@ const MessageTray = new Lang.Class({
                             onCompleteScope: this
                           };
         if (!this._notification.expanded)
-            tweenParams.y = - this.actor.height;
+            tweenParams.y = -this._notificationBin.height;
 
         this._tween(this._notificationBin, '_notificationState', State.SHOWN, tweenParams);
    },

diff --git a/js/ui/notificationDaemon.js b/js/ui/notificationDaemon.js
index 6b1d80be87ff05b3255f7bcbdf578974c587e171..0c4d9d180334da07f1445b343a5a488fd440dac3 100644 (file)
--- a/js/ui/notificationDaemon.js
+++ b/js/ui/notificationDaemon.js
@@ -357,7 +357,7 @@ const NotificationDaemon = new Lang.Class({
         let gicon = this._iconForNotificationData(icon, hints);
         let iconActor = new St.Icon({ gicon: gicon,
                                       icon_type: St.IconType.FULLCOLOR,
-                                      icon_size: source.ICON_SIZE });
+                                      icon_size: MessageTray.NOTIFICATION_ICON_SIZE });
 
         if (notification == null) {
             notification = new MessageTray.Notification(source, summary, body,